<!--
 * @Author: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @Date: 2022-06-29 10:28:44
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-13 20:46:39
 * @FilePath: \B2B\ebuy\src\views\Login\Login\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by fengweicong 75202172+fengweicong@users.noreply.github.com, All Rights Reserved. 
-->
<template>
  <div class="login">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#eee8e8"
    >
      <el-menu-item index="1">密码登录</el-menu-item>
      <el-menu-item index="2">短信登录</el-menu-item>
      <el-menu-item index="3">微信登录</el-menu-item>
    </el-menu>
    <el-form
      status-icon
      ref="ruleForm"
      label-width="100px"
      class="userForm"
      v-if="activeIndex === '1'"
    >
      <el-form-item label="账号" prop="phone">
        <el-input v-model="user.phone" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input v-model="user.pass" placeholder="请输入登录密码"></el-input>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      class="loginButton"
      v-if="activeIndex === '1'"
      @click="loginByPassword"
      >登录</el-button
    >
    <el-form
      :model="tempUser"
      status-icon
      ref="tempUser"
      label-width="120px"
      v-if="activeIndex === '2'"
      class="codeLogin"
    >
      <el-form-item label="" prop="phone">
        <span slot="label">
          <el-dropdown>
            <span class="el-dropdown-link">
              中国大陆+86<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>中国大陆+86</el-dropdown-item>
              <el-dropdown-item>中国香港+852</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
        <el-input
          class="phoneInput"
          v-model="tempUser.phone"
          placeholder="请输入手机号"
          maxlength="11"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input
          class="codeInput"
          v-model="tempUser.code"
          placeholder="填写验证码"
        >
        </el-input>
        <el-button @click="getCode" class="getCodeButton">{{
          showtime
        }}</el-button>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      class="loginButton"
      v-if="activeIndex === '2'"
      @click="Login"
      >登录</el-button
    >
    <div align="center">
      <el-checkbox v-model="agree"></el-checkbox>
      <span>同意《用户协议》和《隐私政策》</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      user: {
        phone: "",
        pass: "",
      }, //用户账号密码登录
      tempUser: {
        phone: "",
        code: "",
      }, //用户短信登录
      showtime: "获取验证码",
      agree: false, //是否同意协议
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key;
      console.log(key, keyPath);
    },
    getCode() {
      //获取验证码
      console.log(this.LoginStatus);
      let time = 60;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.showtime = "获取验证码";
        } else {
          this.showtime = time + "秒后重试";
          time--;
        }
      }, 1000);
    },
    // 密码登录
    loginByPassword() {
      if (!this.agree) {
        alert("请勾选复选框");
      } else {
        this.$API.getLoginAccount().then((res) => {
          let account = res.data.filter(
            (item) => item.account == parseInt(this.user.phone)
          )[0];
          if (account.account_password == this.user.pass) {
            this.$message.success({
              message: "登录成功",
              duration: 1000,
            });
            this.$store.state.user.account_id = account.id
            localStorage.setItem("Account_id", account.id);          
            this.$emit("HasLogin", true, this.user);
            this.$router.push('/')
          } else {
            this.user = {};
            this.$message.error("密码错误");
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.login {
  width: 350px;
  height: 250px;
  background: #eee8e8;
  padding: 20px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login .el-menu-demo {
  width: 300px;
}
.login .el-menu-demo .el-menu-item:hover {
  background-color: #eee8e8 !important;
}
.login .userForm {
  width: 300px;
  margin-top: 10px;
}
.login .codeLogin {
  margin-top: 10px;
}
.login .loginButton {
  width: 200px;
}
.login .codeLogin .codeInput {
  width: 47%;
  float: left;
}
.login .codeLogin .getCodeButton {
  width: 120px;
  float: left;
}
</style>